<%-- 
    Document   : login
    Created on : 20-gen-2015, 12.29.28
    Author     : Luigi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Personal Dashboard</title>
    </head>
    <body>
        <h1>Welcome!</h1>
        <jsp:useBean id="loginBean" scope="session" class="org.meteocal.managers.LoginManager" />
        <jsp:setProperty name="loginBean" property="username" param="username" />
        <jsp:setProperty name="loginBean" property="password" param="password" />
        You're name is <jsp:getProperty name="loginBean" property="currentUser" />
        
        <br>
        
        <jsp:useBean id="calendarWeatherFillerBean" scope="session" class="org.meteocal.managers.WeatherWrapper" />
        <!--jsp:setProperty name="calendarWaeatherFillerBean" property="city"/-->
        <!--jsp:setProperty name="calendarWaeatherFillerBean" property="city" value="Milan"/-->
        ${calendarWeatherFillerBean.setCity("Milan")}
        <strong>Calendar for the month:
            <span id='monthDisplay'></span> and year: <span id='yearDisplay'></span>
            and for the city: <jsp:getProperty name="calendarWeatherFillerBean" property="latitude" />
        </strong>
        <!--We're going to display the calendar. Note that this calendar will be filled by JavaScript.
            The table will be inside a form because each element will be a button: pressing it we'll
            move to the daily view, managed by another JSP  !-->
        <form action="daily.jsp" >
            <table id="calendar"></table>
        </form>
        <!--Now we build the table, with JavaScript-->
        <script>
            
        //Date Management
        var date = new Date();
        //I take the current date to know the current month and the year 
        var currentMonth = date.getMonth();
        var currentYear = date.getUTCFullYear();
        var currentDate = date.getDate();
        document.getElementById("monthDisplay").innerHTML=currentMonth;
        document.getElementById("yearDisplay").innerHTML=currentYear;        
        //Now I set the date at the first day of the month
        date = new Date(currentYear, currentMonth, 1,0,0,0,0);
        //And now I get the day (of the week) of the first day (0 sunday) 
        var firstDayWasA = date.getDay();
        //textInTheCell: the text that we will display in the cell
        //var text=
        
        //var body=document.getElementsByTagName('body')[0];
        var tbl=document.getElementById('calendar');
        tbl.style.width='100%';
        tbl.style.height='50%';
        tbl.setAttribute('border','1');
        var tbdy=document.createElement('tbody');
        var startedWritingCalendar=false;
        var cont=1;
        for(var i=0;i<5;i++){
            var tr=document.createElement('tr');
            for(var j=0;j<7;j++){
                var td=document.createElement('td');
                if(j==firstDayWasA) startedWritingCalendar = true;
                if(startedWritingCalendar && cont<=31){
                    //Building the cell
                    var content = "<span style='width:100%; text-align: right;'>"+cont+"</span><br>"+
                            "<input type='submit' value='details'>";
                    if (cont==currentDate) content="<strong>"+content+"</strong>";
                    //if (cont>=currentDate) content+=
                    //td.appendChild(document.createTextNode(content)); //<-- Here we should put the events
                    td.innerHTML=content;
                    cont++;
                }else{
                    td.appendChild(document.createTextNode(' '));
                }
                tr.appendChild(td);

            }
            tbdy.appendChild(tr);
        }
        tbl.appendChild(tbdy);
        </script>
    </body>
</html>
